<template>
  <a-card>
    <a-form :form="form">
      <div class="title"> 岗位绩效</div>
      <div class="content">
        <table style="width: 100%">
          <tr style="width: 100%">
            <td style="width: 8% ;text-align: center">
              序号
            </td>
            <td style="width: 25% ;text-align: center">
              名称
            </td>
            <td style="width: 25%;text-align: center">
              类型
            </td>
            <td style="width: 25%;text-align: center">
              岗位薪资
            </td>
            <td style="width: 10%;text-align: center">
              操作
            </td>
          <tr v-for="(item,i) in this.data">
            <td>{{i+1}}</td>
            <td>
              <a-input v-decorator="['name', validatorRules.name]" v-model="item.name" placeholder="请输入名称"></a-input>
            </td>
            <td>
              <a-input disabled value="岗位绩效"></a-input>
            </td>
            <td>
              <a-input type="number" v-model="item.score" placeholder="请输入岗位薪资"></a-input>
            </td>
            <td>
              <a-popconfirm v-if="i > 0" title="是否要删除此行？" @confirm="remove(item.id)">
                <a>删除</a>
              </a-popconfirm>
            </td>
          </tr>
        </table>
        <a-button class="addBtn" type="dashed" icon="plus" @click="newMember">
          添加条目
        </a-button>
      </div>
      <div class="title">时效绩效</div>
      <div class="content">
        <table style="width: 100%">
          <tr style="width: 100%">
            <td style="width: 8%;">
              序号
            </td>
            <td style="width: 18%">
              名称
            </td>
            <td style="width: 18%">
              类型
            </td>
            <td style="width: 18%;">
              阈值
            </td>
            <td style="width: 18%;">
              按时分值
            </td>
            <td style="width: 18%;">
              超时分值
            </td>
          <tr v-for="(item,i) in this.timeData">
            <td>{{i+1}}</td>
            <td>
              <a-input v-model="item.name" placeholder="请输入名称"></a-input>
            </td>
            <td>
              <a-input disabled value="时效绩效"></a-input>
            </td>
            <!--          <td>-->
            <!--            <a-select v-model="item.condit" defaultValue="0" style="width: 100%">-->
            <!--              <a-select-option :value='0'>请选择</a-select-option>-->
            <!--              <a-select-option :value='1'>小于等于</a-select-option>-->
            <!--              <a-select-option :value='2'>大于</a-select-option>-->
            <!--            </a-select>-->
            <!--          </td>-->
            <td>
              <a-input type="number" v-model="item.valueStart" placeholder="请设置时间" suffix="小时"></a-input>
            </td>
            <td>
              <a-input type="number" v-model="item.score" placeholder="请输入分值"></a-input>
            </td>
            <td>
              <a-input type="number" v-model="item.overScore" placeholder="请输入分值"></a-input>
            </td>
          </tr>
        </table>
        <div class="scope"><span class="scopeTitle">适用范围</span> 编辑员 审核员</div>
      </div>
      <div class="title"> 其他绩效</div>
      <div class="content">
        <table style="width: 100%">
          <tr style="width: 100%">
            <td style="width: 8% ;">
              序号
            </td>
            <td style="width: 23% ;">
              名称
            </td>
            <td style="width: 23%;">
              类型
            </td>
            <td style="width: 23%;">
              条件
            </td>
            <td style="width: 23%;">
              分值
            </td>
          <tr v-for="(item,i) in this.otherData">
            <td>{{i+1}}</td>
            <td>
              <a-input v-model="item.name" placeholder="请输入名称"></a-input>
            </td>
            <td>
              <a-input disabled value="阅读量绩效"></a-input>
            </td>
            <td>
              <a-input v-if="item.condit == 1" disabled :value="`<${item.valueEnd}`" suffix="次"></a-input>
              <a-input v-else-if="item.condit == 2" disabled :value="`≥${item.valueStart}`" suffix="次"></a-input>
              <a-input v-else-if="item.condit == 3" disabled :value="`≥${item.valueStart}且<${item.valueEnd}`" suffix="次"></a-input>
            </td>
            <td>
              <a-input type="number" v-model="item.score" placeholder="请输入分值"></a-input>
            </td>
          </tr>
        </table>
      </div>
      <div class="title"> 特殊配置</div>
      <div class="content">
        <table style="width: 100%">
          <tr style="width: 100%">
            <td style="width: 8% ;">
              序号
            </td>
            <td style="width: 23% ;">
              配置项
            </td>
            <td style="width: 23%;">
              选项
            </td>
          </tr>
          <tr v-for="(item,i) in specialList">
            <td>{{i+1}}</td>
            <td>
              <a-input disabled v-model="item.itemText" placeholder="请输入名称"></a-input>
            </td>
            <td>
              <a-radio-group :options="plainOptions[i]" :default-value="item.itemValue" v-model="item.itemValue" />
            </td>
          </tr>
        </table>
      </div>
      <a-button type="primary" @click="validate" :loading="loading" style="float: right">提交</a-button>
    </a-form>
  </a-card>
</template>

<script>
import FooterToolBar from '@/components/tools/FooterToolBar'
import { getAction, httpAction } from '@/api/manage'
import BarAndLine from '../../components/chart/BarAndLine'

export default {
  name: 'performanceConfig',
  components: {
    BarAndLine,
    FooterToolBar
  },
  data() {
    return {
      description: '高级表单常见于一次性输入和提交大批量数据的场景。',
      loading: false,
      timeData: [],
      spreadData: [],
      bigId: '',
      otherData: [],
      form: this.$form.createForm(this),
      validatorRules: {
        name: { rules: [{ required: true, message: '输入名称' }] }
      },
      // table
      plainOptions: [
        [{ label: '是', value: '1' }, { label: '否', value: '2' }],
        [{ label: '平分计算', value: '1' }, { label: '重复计算', value: '2' }]
      ],
      specialList: [],
      data: []
    }
  },
  created() {
    this.getPerformanceList()
  },
  methods: {
    getPerformanceList: function() {
      var url = '/performance/performanceConfig/list'
      getAction(url).then(res => {
        if (res.success) {
          this.bigId = res.result.bigId
          this.data = res.result.listMap.post
          this.timeData = res.result.listMap.time
          this.spreadData = res.result.listMap.spread
          this.otherData = res.result.listMap.other
          this.specialList = res.result.specialList
        }
      })
    },
    handleSubmit(e) {
      e.preventDefault()
    },
    newMember() {
      this.data.push({
        id: this.bigId + this.data.length,
        name: '',
        type: 'post',
        score: '',
        editable: true,
        isNew: true
      })
    },
    remove(key) {
      const newData = this.data.filter(item => item.id !== key)
      this.data = newData
    },

    // 最终全页面提交
    validate() {
      var param = []
      console.log(param)

      param = this.data
        .concat(this.timeData)
        .concat(this.otherData)
        .concat(this.spreadData)

      for (var i = 0; i <= param.length - 1; i++) {
        if ((param[i].name == '') | (param[i].name == undefined)) {
          this.$message.warning('名称不能为空')
          return
        }
        if ((param[i].score == '') | (param[i].score == undefined)) {
          this.$message.warning('分值不能为空')
          return
        }
      }

      httpAction(
        '/performance/performanceConfig/edit',
        { performanceConfigList: param, sysDictItemList: this.specialList },
        'put'
      ).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.getPerformanceList()
        } else {
          this.$message.warning(res.message)
        }
      })
      // this.$refs.repository.form.validateFields((err, values) => {
      //   if (!err) {
      //     this.$notification['error']({
      //       message: 'Received values of form:',
      //       description: values
      //     })
      //   }
      // })
      // this.$refs.task.form.validateFields((err, values) => {
      //   if (!err) {
      //     this.$notification['error']({
      //       message: 'Received values of form:',
      //       description: values
      //     })
      //   }
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  margin-bottom: 24px;
}

.title {
  font-weight: bold;
  font-size: 16px;
  color: #333333;
}

.content {
  width: 100%;
  border: 1px solid #ededed;
  border-radius: 6px;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 10px;
}
.content td {
  text-align: center;
}

.addBtn {
  display: block;
  width: 30%;
  margin: 16px auto;
}

.scope {
  border-top: 1px solid #ededed;
  font-size: 14px;
  color: #999999;
  padding-top: 10px;
  margin-top: 10px;

  &Title {
    font-weight: bold;
    color: #666666;
  }
}

/deep/ .ant-input {
  text-align: center;
}
</style>